<template>
  <div v-masonry class="container">
    <div v-masonry-tile v-for="(item, index) in demoList" :class="`demo-${item}`" :key="index" @click="loajde(index)">
      <div class="falls">
        <div class="falls-img">
          <img style="width: 288px;" :src="item.path" alt />
          <div class="falls-img-box" v-if="index===0 && show">
            <img src="../images/falls.png" alt="">
          </div>
        </div>

        <div class="falls-top">
          <p>数字人</p>
          <p>263人浏览</p>
        </div>
        <div class="falls-down">
          <div class="falls-down-left">
            <div class="falls-down-left-img">
              <img src=".././images/profile-photo.png" alt />
            </div>
            <span>小瓶盖要打开</span>
          </div>
          <div class="falls-down-right">数字分身</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
  import {peopleList} from '@/utils/api'
export default {
  name: "fallsView",
  props:{
    show:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      demoList: [
        {
          path:
            "https://img1.baidu.com/it/u=952600201,3461173534&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=c18a23a50c9d4c21aa52da808837f9c5"
        },
        {
          path:
            "https://img2.baidu.com/it/u=2376350185,9700368&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=aa1acc24e4eda8fbb0400c6605a5581a"
        },
        {
          path:
            "https://img2.baidu.com/it/u=3877894948,2050135903&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=cfbd3e6dcdca4d8509068d92fda94f83"
        },
        {
          path:
            "https://img2.baidu.com/it/u=605054797,2327142606&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=caa58210f19e2190de30ead0aae6d31c"
        },
        {
          path:
            "https://img1.baidu.com/it/u=4137997603,1259881509&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=71021269707a0211b00eb20943e85bdc"
        },
        {
          path:
            "https://img0.baidu.com/it/u=985235917,3927982578&fm=253&fmt=auto?w=130&h=170"
        },
        {
          path:
            "https://img1.baidu.com/it/u=1773922313,1020703787&fm=253&fmt=auto?w=130&h=170"
        },
        {
          path:
            "https://img1.baidu.com/it/u=3297175625,3468494859&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=431"
        },
        {
          path:
            "https://img1.baidu.com/it/u=1697591426,439251294&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=640"
        },
        {
          path:
            "https://img1.baidu.com/it/u=952600201,3461173534&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=c18a23a50c9d4c21aa52da808837f9c5"
        },
        {
          path:
            "https://img2.baidu.com/it/u=2376350185,9700368&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=aa1acc24e4eda8fbb0400c6605a5581a"
        }
      ]
    };
  },
  created(){

  },
  methods:{
  }
};
</script>
  
  <style lang="scss" scoped>
.container {
  width: 100%;
}
.falls {
  // outline: 1px solid blue;
  margin: 0 34px 20px 0px;
  &-img {
    width: 288px;
    position: relative;
    > img {
      width: 100%;
    }
    &-box {
      position: absolute;
      width: 32px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #dddddd;
      top: 18px;
      right: 18px;
     display: flex;
     justify-content: center;
     align-items: center;
      >img{
        width: 18px;
        height: 18px;
      }
    }
  }

  &-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    margin-top: 17px;
    margin-bottom: 10px;
    & > p:nth-child(2) {
      font-weight: 500;
      font-size: 16px;
      color: #999999;
    }
  }
  &-down {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    &-left {
      display: flex;
      font-size: 14px;

      font-weight: 400;
      color: #333333;

      &-img {
        width: 22px;
        height: 22px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 6px;
        > img {
          width: 100%;
        }
      }
    }
    &-right {
      width: 68px;
      height: 26px;
      background: #3a7cd81f;
      font-size: 14px;
      font-weight: 400;
      color: #3a7bd8;
      text-align: center;
      line-height: 26px;
    }
  }
}
</style>